<template>
	<view class="page border-box bg-white">
		<u-loading-page fontSize="34rpx" loadingText=" " iconSize="60rpx" :loading="!pageLoaded" v-if="!pageLoaded" loadingMode="spinner" ></u-loading-page>
		<template v-else>
			<swiper v-if="detailData.list.length > 10" class="swiper" circular @change="detailData.swiperChange"
				swiperDuration="250">
				<swiper-item v-for="(item, index) in detailData.displaySwiperList" class="swiper">
					<scroll-view class="swiper" scroll-y="true">
						<view class="flex align-center bg-black" style="min-height: 100vh;">
							<image @click="showImageDetail"  show-menu-by-longpress class="w-100" :src="item.posterLink.text" mode="widthFix"></image>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<swiper v-else class="swiper" :circular="false" @change="detailData.swiperChange" swiperDuration="250">
				<swiper-item v-for="(item, index) in detailData.list" class="swiper">
					<scroll-view class="swiper" scroll-y="true">
						<!-- <image @click="showImageDetail"  show-menu-by-longpress class="w-100" :src="item.posterLink.text" mode="widthFix"></image> -->
					<view class="flex align-center bg-black" style="min-height: 100vh;">
						<image @click="showImageDetail"  show-menu-by-longpress class="w-100" :src="item.posterLink.text" mode="widthFix"></image>
					</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</template>
		<u-navbar leftText="返回" title="个人中心" bgColor="rgba(0,0,0,0)" :safeAreaInsetTop="true">
			<template #left>
				<view style="background-color: rgba(255,255,255,0.6); border: 1px solid rgba(151,151,151, 0.4)"
					class="position-relative rounded-circle overflow-hidden border-box nav_btns">
					<view style="filter: blur(10px);" class="position-absolute bg-white h_100 w_100 top-0 left-0">
					</view>
					<view class="position-absolute flex align-center h_100 w_100 top-0 left-0">
						<view @click="back" class="back_icon flex align-center justify-center">
							<u-icon name="/static/left.svg" size="32rpx"></u-icon>
						</view>
						<view class="line"></view>
						<view @click="addressData.showSelect"
							class="flex-1 flex align-center border-box pl-1 pr-2 justify-center">
							<view class="flex mr justify-center align-center">
								<text class="font-md-g u-line-1 font-weight-normal">{{addressData.actAddress}}</text>
							</view>
							<u-icon name="/static/options.svg" size="34rpx"></u-icon>
						</view>
					</view>
				</view>
			</template>
			<template #center></template>
		</u-navbar>
		<view v-if="isGuideShow" style="pointer-events: none;" class="position-fixed flex align-center flex-column justify-center top-0 left-0 h_100 w_100">
			<image class="mb-32 guide_img" src="/static/guide.svg" mode=""></image>
			<text class="text-white font-lg">左右滑动切换海报</text>
		</view>
		<view  class="position-fixed indicator flex align-center justify-center">
			<text
				class="text-white font-weight-normal font-mini">{{ detailData.originIndex + 1 }}/{{ detailData.list.length }}</text>
		</view>
		<select-address-pop @click="addressData.select" :act="addressData.actAddress" :list="addressData.list"
			v-model:show="addressData.show"></select-address-pop>
		<annunciate-pop @click="showAddHandle" v-model:show="showAnn"></annunciate-pop>
		<add-wechat-pop v-model:show="showAddWechat"></add-wechat-pop>
	</view>
</template>

<script setup>
	import {
		getIndexList
	} from '@/common/api.js'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue'
	import {
		pageInfo
	} from '@/store/pageInfo.js'
	import selectAddressPop from '@/components/select_address_pop.vue'
	import annunciatePop from '@/components/annunciate_pop.vue'
	import addWechatPop from '@/components/add_wechat_pop.vue'

	const {
		statusBarHeight,
		windowHeight
	} = pageInfo()
	const isGuideShow = ref(false) // 是否显示引导操作
	const pageLoaded = ref(false) // 页面加载完成
	const showAddWechat = ref(false) // 是否显示加群二维码
	// 显示加群二维码弹窗
	const showAddHandle = () => {
		showAddWechat.value = true
	}
	// 返回上一页
	const back = () => {
		uni.navigateBack()
	}
	// 是否显示引导加微信群弹窗
	const showAnn = ref(false)
	// 性能原因只让前台显示 3 个 图片
	const initSwiperData = (originIndex = detailData.originIndex) => {
		const originListLength = detailData.list.length; // 源数据长度
		const displayList = [];
		displayList[detailData.displayIndex] = detailData.list[originIndex];
		displayList[detailData.displayIndex - 1 == -1 ? 2 : detailData.displayIndex - 1] =
			detailData.list[
				originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1
			];
		displayList[detailData.displayIndex + 1 == 3 ? 0 : detailData.displayIndex + 1] =
			detailData.list[
				originIndex + 1 == originListLength ? 0 : originIndex + 1
			];
		detailData.displaySwiperList = displayList;
	}
	// 显示海报详情
	const showImageDetail = () => {
		uni.previewImage({
			urls: [detailData.list[detailData.originIndex].posterLink.text],
			current: 0,
		})
	}
	// 页面详情相关
	const detailData = reactive({
		list: [], // 当前列表
		originList: [], // 总列表
		displaySwiperList: [], // 显示的列表
		displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
		originIndex: 0, // 记录源数据的下标
		// 在每次滑动时时 换掉当前显示图片的前一个和后一个
		swiperChange: ({
			detail
		}) => {
			isGuideShow.value = false
			const {
				current
			} = detail;
			const originListLength = detailData.list.length;
			// =============向后==========
			if (detailData.displayIndex - current == 2 || detailData.displayIndex - current == -1) {
				detailData.originIndex =
					detailData.originIndex + 1 == originListLength ? 0 : detailData.originIndex + 1;
				detailData.displayIndex = detailData.displayIndex + 1 == 3 ? 0 : detailData.displayIndex + 1;
				initSwiperData(detailData.originIndex);
			}
			// ======如果两者的差为-2或者1则是向前滑动============
			else if (detailData.displayIndex - current == -2 || detailData.displayIndex - current == 1) {
				detailData.originIndex = detailData.originIndex - 1 == -1 ? originListLength - 1 : detailData
					.originIndex - 1;
				detailData.displayIndex = detailData.displayIndex - 1 == -1 ? 2 : detailData.displayIndex - 1;
				initSwiperData(detailData.originIndex);
			}
			if (detailData.originIndex == 0) {
				uni.showToast({
					icon: 'none',
					title: '当前为第一条组讯'
				})
			}
			if (detailData.originIndex == detailData.list.length - 1) {
				uni.showToast({
					icon: 'none',
					title: '当前为最后一条组讯'
				})
			}
		},
		getData: async () => {
			pageLoaded.value = false
			const res = await getIndexList(detailData.getParams)
			pageLoaded.value = true
			if (res.total == 0) {
				uni.showModal({
					title: '',
					content: '暂无组讯',
					showCancel: false,
					confirmText: '返回首页',
					success: () => {
						uni.navigateBack()
					}
				})
				return
			}
			detailData.list = res.records
			detailData.originList = res.records
			initSwiperData();
			addressData.getAddressList()
		},

		getParams: {
			viewId: '',
			pageNum: 1,
			pageSize: 1000
		}
	})
	// 选择 组讯地址
	const selectHandle = () => {
		pageLoaded.value = false
		if (addressData.actAddress === '全国') {
			detailData.list = detailData.originList
		} else {
			detailData.list = detailData.originList.filter(item => {
				if (!item.area) {
					return false
				}
				return item.area.indexOf(addressData.actAddress) !== -1
			})
		}
		detailData.originIndex = 0
		initSwiperData()
		pageLoaded.value = true
	}
	// 组讯地址 信息
	const addressData = reactive({
		list: [],
		getAddressList: () => {
			let list = []
			detailData.originList.forEach(item => {
				if (item.area) {
					list.push(...item.area)
				}
			})
			list.unshift('全国')
			list = [...(new Set(list))]
			addressData.list = list

		},
		actAddress: '全国',
		show: false,
		select: (item) => {
			addressData.actAddress = item
			selectHandle()
		},
		showSelect: () => {
			addressData.show = true
		}
	})
	// 引导加群弹窗逻辑
	const annTimrData = reactive({
		timer: null,
		start: () => {
			annTimrData.timer = setTimeout(() => {
				showAnn.value = true
				uni.setStorageSync('showedAnn', true)
			}, 60000)
		},
		stop: () => {
			clearTimeout(annTimrData.timer)
		},
		check: () => {
			const key = uni.getStorageSync('showedAnn')
			if (key) {
				annTimrData.stop()
			}
		}
	})
	// 引导操作逻辑
	const checkIsShowG = () => {
		const key = uni.getStorageSync('isGuideShow')
		if(key) return
		isGuideShow.value = true
		uni.setStorageSync('isGuideShow', true)
	}
	onUnload(() => {
		annTimrData.stop()
	})
	onLoad(({
		viewId
	}) => {
		detailData.getParams.viewId = viewId
		detailData.getData()
		annTimrData.start()
		// annTimrData.check()
		checkIsShowG()
	})
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;

		.indicator {
			bottom: 200rpx;
			right: 60rpx;
			background-color: rgba(0, 0, 0, 0.3);
			padding:  8rpx 16rpx;
			border-radius: 16rpx;
		}

		.swiper {
			height: 100vh;
		}
		.guide_img{
			width: 450rpx;
			height: 190rpx;
		}
		.nav_btns {
			height: 64rpx;
			width: 258rpx;

			.back_icon {
				width: 88rpx;
			}

			.line {
				width: 1rpx;
				height: 37rpx;
				background-color: rgba(0, 0, 0, 0.20);
			}
		}
	}
</style>